<template>
  <el-dialog :title="title" :visible.sync="dialogvisible" width="65%" append-to-body class="my-dialog"
             :close-on-click-modal="false" @close="cancel">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="projectName" placeholder="请输入" disabled/>
          </el-form-item>
        </el-col>
        <!--        客户 -->
        <el-col :span="12">
          <el-form-item label="甲方信息" prop="type">
            <el-select
              :style="{width: '100%'}"
              v-model="customId"
              filterable
              remote
              disabled
              reserve-keyword
              placeholder="请输入甲方信息关键词"
              :remote-method="remoteMethod_user"
              :loading="loading_company">
              <el-option
                v-for="item in user_list"
                :key="item.id"
                :label="item.name || '未知'"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同总价" prop="money">
            <el-input v-model="form.money" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              size="small"
              v-model="form.startTime"
              class="w100"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              size="small"
              v-model="form.endTime"
              class="w100"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" size="small" plain>确 定</el-button>
      <el-button @click="cancel" size="small" plain>取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getProject,
} from "@/api/system/project";
import {listCustom, getCustom} from '@/api/system/custom.js'
import {listUser} from '@/api/system/user'
import {citysMana} from "@/api/system/config"
import {listDept, getDept} from "@/api/system/dept";
import {listProjectType} from "@/api/system/project";
import {listPost} from "@/api/system/post";
import {mapGetters} from 'vuex'
import {addContract, updateContract, getContract} from '@/api/system/contract.js'

export default {
  name: "detail",
  dicts: ['sys_stagnation_type', 'sys_purchase_type', 'sys_post_nature', 'sys_deposit_type', 'sys_deposit_status', 'sys_post_pay_method', 'sys_post_status'],
  props: ['visible', 'param', 'contractId'],
  data() {
    return {
      // 弹出层标题
      title: "编辑合同信息",
      // 是否显示弹出层
      dialogvisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postCode: undefined,
        postName: undefined,
        status: undefined
      },
      rules: {
        money: [
          {required: true, message: "金额不能为空", trigger: "blur"}
        ],
        startTime: [
          {required: true, message: "开始时间不能为空", trigger: "blur"}
        ],
        endTime: [
          {required: true, message: "结束时间不能为空", trigger: "blur"}
        ]
      },
      // 表单参数
      form: {
        deptId: '', // 组织ID
        projectId: '', // 项目ID
        money: '', //  金额
        startTime: '', // 开始时间
        endTime: '', // 结束时间
      },
      props: {
        lazy: true,
        label: "name",
        value: "id",
        lazyLoad: this.lazyLoad,
      },
      cascaderData: [], // 地址值
      postList: [],
      activeNames: ['1'],
      loading_company: false,
      compay_list: [],
      loading_user: false,
      user_list: [],
      projectType: [], // 项目类型/类别
      jobList: [],

      projectName: '',
      customId: ''
    };
  },
  computed: {
    ...mapGetters([
      'deptId'
    ]),
  },
  watch: {
    visible() {
      this.dialogvisible = this.visible
      this.reset()
      if (this.visible) {
        if (this.param) {
          this.getDetail() // 项目详情
        }
        if (this.contractId) {
          this.getContractDetail()
        }
      }
    }
  },
  created() {
  },
  methods: {
    getContractDetail() {
      getContract(this.contractId).then(res => {
        this.form.money = res.data.detail.money
        this.form.startTime = res.data.detail.startTime
        this.form.endTime = res.data.detail.endTime
        this.form.id = this.contractId
      })
    },
    /** 详情 */
    getDetail() {
      getProject(this.param.id).then(response => {
        this.form.startTime = response.data.detail.startTime // 开始时间
        this.form.endTime = response.data.detail.endTime // 结束时间
        this.form.money = response.data.detail.contractMoney
        this.projectName = response.data.detail.name
        this.customId = response.data.detail.customId
        this.getUserDetail()
      });
    },
    // 客户搜素
    remoteMethod_kehu(query) {
      this.loading_kehu = true
      listCustom({
        pageNum: 1,
        pageSize: 10,
        name: query
      }).then(response => {
        this.kehu_list = response.rows;
        this.loading_kehu = false
      });
    },
    // 负责人搜索
    remoteMethod_fuzeren(query, id) {
      this.loading_kehu = true
      let query_ = {
        pageNum: 1,
        pageSize: 10,
      }
      if (query !== 'edit') {
        query_.userId = id
      } else {
        query_.nickName = query
      }
      listUser(query_).then(response => {
        this.fuzeren_list = response.rows;
        this.loading_kehu = false
      });
    },
    // 地址变化徽调
    handleDep(option) {
      if (this.$refs["address"].getCheckedNodes().length) {
        let id_ = this.$refs["address"].getCheckedNodes()[0].path;
        let name_ = this.$refs["address"].getCheckedNodes()[0].pathLabels;
        this.form.provinceId = id_[0]
        this.form.cityId = id_[1]
        this.form.districtId = id_[2]
        this.form.province = name_[0]
        this.form.city = name_[1]
        this.form.district = name_[2]
      } else {
        this.form.provinceId = ''
        this.form.cityId = ''
        this.form.districtId = ''
        this.form.province = ''
        this.form.city = ''
        this.form.district = ''
      }
    },
    changeFuzeren(option) {
      if (!option) {
        this.form.leader = ''
        return
      }
      for (let item of this.fuzeren_list) {
        if (item.userId == option) {
          this.form.leader = item.nickName
          this.form.phone = item.phonenumber
        }
      }
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data_ = JSON.parse(JSON.stringify(this.form))
          console.log('data_:', data_)
          data_.projectId = this.param.id
          if (data_.id != undefined) {
            updateContract(data_).then(response => {
              this.$emit('getList')
              this.$modal.msgSuccess("修改成功");
              this.$emit('getContract')
              this.cancel();
            });
          } else {
            addContract(data_).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('getContract')
              this.cancel();
            });
          }
        }
      });
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    reset() {
      this.form = {
        deptId: '', // 组织ID
        projectId: '', // 项目ID
        money: '', //  金额
        startTime: '', // 开始时间
        endTime: '', // 结束时间
      }
      this.customId = ''
      this.projectName = ''
      this.resetForm("form");
    },
    // 查询客户信息
    remoteMethod_user(query) {
      this.loading_user = true
      let query_ = {
        pageNum: 1,
        pageSize: 10,
        name: query
      }
      listCustom(query_).then(response => {
        this.user_list = response.rows;
        this.loading_user = false
      });
    },
    // 客户详情
    getUserDetail() {
      getCustom(this.customId).then(res => {
        this.user_list = [{
          id: Number(res.data.id),
          name: res.data.name
        }]
      })
    },
    // 查询运营主体信息
    remoteMethod_company(query) {
      this.loading_cmpany = true
      let query_ = {
        pageNum: 1,
        pageSize: 10,
        deptName: query,
        type: 1 // 固定类型
      }
      listDept(query_).then(response => {
        this.compay_list = response.data;
        this.loading_cmpany = false
      });
    },
    // 公司详情
    getCompanyDetail() {
      getDept(this.form.companyId).then(res => {
        this.compay_list = [{
          deptId: res.data.deptId,
          deptName: res.data.deptName
        }]
      })
    },
    // 项目类型/类别 listProjectType
    getProjectType() {
      listProjectType(this.queryParams).then(response => {
        this.projectType = response.rows;
      });
    },
    // 项目岗位 listPost
    getPost() {
      listPost({
        pageNum: 1,
        pageSize: 10,
      }).then(response => {
        this.jobList = response.rows;
      });
    },
    handleSelectionChange(selection) {
      console.log('selection:', selection)
      // this.ids = selection.map(item => item.postId)
      // this.single = selection.length != 1
      // this.multiple = !selection.length
    },
    // 新增岗位
    addTableLine() {
      this.postList.push({
        deptId: this.deptId,
        postId: '', // 岗位id
        type: '', // 计费方式1-年;2-季度;3-月;4-天;5-小时
        startTime: '', //
        endTime: '', //
        number: '', // 人数
        price: '', // 单价
        money: '', // 总价
        remark: '', //
      })
    },
    detelBtn(index) {
      this.postList.splice(index, 1)
    },
  }
}
</script>

<style scoped>

</style>
